<!--
 * @Author: xuxu12138 1718324422@qq.com
 * @Date: 2024-04-08 11:16:56
 * @LastEditors: xuxu12138 1718324422@qq.com
 * @LastEditTime: 2024-04-09 08:39:40
 * @FilePath: /things-admin/src/view/operationlog/OperationLog.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <div>
    <!-- 表格 -->
    <Table border :columns="columns" :data="listdata" :max-height="600">
      <div slot-scope="{ row }" slot="requestMethod">
        {{
          row.requestMethod == "PUT"
            ? "修改"
            : row.requestMethod == "DELETE"
            ? "删除"
            : row.requestMethod == "GET"
            ? "新增"
            : row.requestMethod == "POST"
            ? "查找"
            : ""
        }}
      </div>
    </Table>
    <!-- 表格 -->

    <!-- 分页 -->
    <div
      style="display: flex; justify-content: space-between; margin-top: 20px"
    >
      <div></div>
      <Page
        :total="total"
        @on-change="changeSizeValue"
        @on-page-size-change="changePageSize"
        show-sizer
      />
    </div>
    <!-- 分页 -->
  </div>
</template>

<script>
import { operationLog } from "@/base/api/OperationLog";
export default {
  data() {
    return {
      pageIndex: 1,
      pageSize: 10,
      listdata: [],
      total: 0,
      columns: [
        {
          title: "ID",
          key: "id",
          width: 100,
        },
        {
          title: "操作人员id",
          key: "accountId",
          width: 100,
        },
        {
          title: "创建时间",
          key: "created",
          width: 200,
        },

        {
          title: "地址",
          key: "ip",
          width: 150,
        },
        {
          title: "操作人员",
          key: "name",
          width: 150,
        },
        {
          title: "请求方式",
          slot: "requestMethod",
          width: 150,
        },
        {
          title: "请求URL",
          key: "requestUrl",
          width: 450,
        },
        {
          title: "账号类型",
          key: "type",
          minWidth: 100, // 最小列宽
        },
      ],
    };
  },
  methods: {
    // 查询日志接口
    getOperstionLog() {
      let params = {
        pageIndex: this.pageIndex,
        pageSize: this.pageSize,
        sortDirection: "ASC",
      };
      operationLog(params).then((res) => {
        console.log(res.data.itemCount);
        this.listdata = res.data.items;
        this.total = res.data.itemCount;
      });
    },
    // 展示哪页数据
    changeSizeValue(data) {
      this.pageIndex = data;
      this.getOperstionLog();
    },
    // 每页展示数据
    changePageSize(data) {
      this.pageIndex = 1;
      this.pageSize = data;
      this.getOperstionLog();
    },
  },
  mounted() {
    this.getOperstionLog();
  },
};
</script>

<style lang="less" scoped></style>
